<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/ydui/ydui.rem.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <!-- 引入rem自适应类库 -->
    <script src="static/ydui/ydui.flexible.js"></script>
</head>
<body>
<div id="app" v-cloak style="height:100%;background-color: #fff;">
    <yd-layout>
    	
    	<yd-navbar slot="navbar" title="首页">
            <a href="message.html" slot="right" style="font-size: 0.3rem;color: #37b9c7;">
                <i class="fa fa-bell"></i><span style="margin-left: 0.1rem;">消息</span>
            </a>
        </yd-navbar>

        <div style="height: 3rem;text-align: center;position: relative;border-bottom: 1px solid #bebebe;">
            <img :src="mediaUrl+logoMain" style="width: 1.2rem;height: 1.2rem;border-radius: 100%;margin: 0.3rem;padding: 0.2rem;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);"/>
            <div style="color: #bcbcbc;font-size: 0.26rem;font-weight: 600;line-height: 0.4rem;">总资产折合（CNY）</div>
            <div style="color: #8d8d8d;font-size: 0.4rem;font-weight: 600;line-height: 0.5rem;">{{totalAsset}}</div>
        </div>

        <yd-cell-group style="margin-top: 0.3rem;">
            <yd-cell-item class="ox-wallet-row ox-wallet-row-box" :href="'fund-detail.html?token='+oxToken+'&balance='+oxBalance+'&lock='+oxLock+'&cny='+oxCny" type="a">
                <span slot="left">
                    <!--i class="fa fa-bitcoin" style="font-size: 0.34rem;"></i-->
                    <img :src="mediaUrl+logoMini" style="width: 0.4rem;">
                    <span style="font-size: 0.34rem;font-weight: 600;margin-left: 0.2rem;">{{oxToken}}</span>
                </span>
                <span slot="right">
                    <div style="font-size: 0.28rem;font-weight: 700;line-height: 0.4rem;">{{oxBalance}}</div>
                    <div style="line-height: 0.4rem;color: #b1afaf;">≈&nbsp;{{oxCny}}&nbsp;CNY</div>
                </span>
            </yd-cell-item>

            <yd-cell-item v-for="token in tokenList" class="ox-wallet-row" :href="'fund-detail.html?token='+token.token+'&balance='+token.balance+'&lock='+token.lock+'&cny='+token.cny+'&rate='+token.ox_rate+'&logo='+token.logo" type="a">
                <span slot="left">
                    <!--i class="fa fa-bookmark" style="font-size: 0.34rem;"></i-->
                    <img :src="mediaUrl+token.logo" style="width: 0.4rem;">
                    <span style="font-size: 0.34rem;font-weight: 600;margin-left: 0.2rem;">{{token.token}}</span>
                </span>
                <span slot="right">
                    <div style="font-size: 0.28rem;font-weight: 700;line-height: 0.4rem;">{{token.balance}}</div>
                    <div style="line-height: 0.4rem;color: #b1afaf;">≈&nbsp;{{token.cny}}&nbsp;CNY</div>
                </span>
            </yd-cell-item>
        </yd-cell-group>

        <yd-tabbar slot="tabbar" bgcolor="#f5f5f5" active-color="#37b9c7">
            <yd-tabbar-item title="TOKEN" link="index.html" type="a" active>
                <yd-icon name="home" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="商城" link="mall.html" type="a">
                <yd-icon name="shopcart" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="我的" link="center.html" type="a">
                <yd-icon name="ucenter" slot="icon"></yd-icon>
            </yd-tabbar-item>
        </yd-tabbar>

    </yd-layout>
</div>
<script src="static/lib/jquery.min.js"></script>
<script src="static/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<!-- 引入 Vue -->
<script src="static/lib/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="static/ydui/ydui.rem.js"></script>
<script src="static/js/common.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            oxToken:'OXT'
            ,oxBalance:0
            ,tokenList:[]
            ,oxLock:0.0
            ,oxCny:0.0
            ,totalAsset:0.0
            ,mediaUrl:'https://oxtoken.io/media/'
            ,logoMain: ''
            ,logoMini: ''
        },
        created:function () {
            $.getJSON(baseURL + "/api/v1/get-user-wallet", function(r){
                vm.oxBalance = r.ox;
                vm.oxCny = r.ox_cny;
                vm.oxLock = r.ox_lock;
                vm.totalAsset = r.total_cny;
                vm.tokenList = r.token;
                vm.logoMain = r.logo_main;
                vm.logoMini = r.logo_mini;
            });
        }
    });
</script>
</body>
</html>